<template>
  <div class="my">
    <header>
      <div class="xinxi">
        <div class="yonghuming">
          <p>Hello,{{ name }}</p>
          <span @click="out">退出登录</span>
        </div>
        <div class="hai">
          <h5>嗨豆:0</h5>
          <h5>优惠券:0</h5>
        </div>
        <div class="touxiang">
          <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
        </div>
      </div>
    </header>
    <div class="dingdan">
      <div>
        <div class="top" @click="quanbudingdan()">
          <div class="left">我的订单</div>
          <div class="right">全部订单 ></div>
        </div>
        <div class="bottom">
          <dl>
            <dt>
              <svg
                t="1667213525233"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6516"
                width="32"
                height="32"
              >
                <path
                  d="M883.2 716.8c-12.8 0-25.6 12.8-25.6 25.6l0 147.2c0 38.4-32 70.4-64 70.4L115.2 960c-38.4 0-64-32-64-70.4L51.2 134.4c0-38.4 32-70.4 64-70.4l672 0c38.4 0 64 32 64 70.4l0 160c0 12.8 12.8 25.6 25.6 25.6 12.8 0 25.6-12.8 25.6-25.6L902.4 134.4c0-64-51.2-121.6-115.2-121.6L115.2 12.8C51.2 19.2 0 70.4 0 134.4l0 748.8c0 64 51.2 121.6 115.2 121.6l672 0c64 0 115.2-51.2 115.2-121.6l0-147.2C908.8 723.2 896 716.8 883.2 716.8z"
                  p-id="6517"
                  fill="#ffbc25"
                ></path>
                <path
                  d="M960 364.8 499.2 364.8c-32 0-64 25.6-64 64l0 172.8c0 32 25.6 64 64 64L960 665.6c32 0 64-25.6 64-64L1024 422.4C1024 390.4 998.4 364.8 960 364.8zM998.4 595.2c0 19.2-19.2 38.4-38.4 38.4L499.2 633.6c-19.2 0-38.4-19.2-38.4-38.4L460.8 422.4c0-19.2 19.2-38.4 38.4-38.4L960 384c19.2 0 38.4 19.2 38.4 38.4L998.4 595.2z"
                  p-id="6518"
                  fill="#ffbc25"
                ></path>
                <path
                  d="M614.4 512m-70.4 0a1.1 1.1 0 1 0 140.8 0 1.1 1.1 0 1 0-140.8 0Z"
                  p-id="6519"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>待支付</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667213794116"
                class="icon"
                viewBox="0 0 1109 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11044"
                width="32"
                height="32"
              >
                <path
                  d="M341.333333 256v-42.666667h-85.333333V128h-42.666667v128h42.666667z"
                  p-id="11045"
                  fill="#ffbc25"
                ></path>
                <path
                  d="M925.866667 298.666667H746.666667v-21.333334c0-59.733333-46.933333-106.666667-106.666667-106.666666h-179.2C433.066667 72.533333 341.333333 0 234.666667 0 104.533333 0 0 104.533333 0 234.666667c0 83.2 42.666667 153.6 106.666667 196.266666V768c0 59.733333 46.933333 106.666667 106.666666 106.666667h21.333334c0 83.2 66.133333 149.333333 149.333333 149.333333s149.333333-66.133333 149.333333-149.333333h213.333334c0 83.2 66.133333 149.333333 149.333333 149.333333s149.333333-66.133333 149.333333-149.333333h64V503.466667L925.866667 298.666667zM1066.666667 576h-192c-36.266667 0-64-27.733333-64-64s27.733333-64 64-64h128l64 72.533333V576zM42.666667 234.666667c0-106.666667 85.333333-192 192-192s192 85.333333 192 192-85.333333 192-192 192-192-85.333333-192-192z m341.333333 746.666666c-59.733333 0-106.666667-46.933333-106.666667-106.666666s46.933333-106.666667 106.666667-106.666667 106.666667 46.933333 106.666667 106.666667-46.933333 106.666667-106.666667 106.666666z m142.933333-149.333333c-19.2-61.866667-74.666667-106.666667-142.933333-106.666667s-123.733333 44.8-142.933333 106.666667H213.333333c-36.266667 0-64-27.733333-64-64V452.266667c25.6 10.666667 55.466667 17.066667 85.333334 17.066666 130.133333 0 234.666667-104.533333 234.666666-234.666666 0-6.4 0-14.933333-2.133333-21.333334H640c36.266667 0 64 27.733333 64 64v554.666667h-177.066667zM896 981.333333c-59.733333 0-106.666667-46.933333-106.666667-106.666666s46.933333-106.666667 106.666667-106.666667 106.666667 46.933333 106.666667 106.666667-46.933333 106.666667-106.666667 106.666666z m142.933333-149.333333c-19.2-61.866667-74.666667-106.666667-142.933333-106.666667s-123.733333 44.8-142.933333 106.666667H746.666667V341.333333h162.133333l57.6 64H874.666667c-59.733333 0-106.666667 46.933333-106.666667 106.666667s46.933333 106.666667 106.666667 106.666667h192v213.333333h-27.733334z"
                  p-id="11046"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>待发货</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667213738301"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8881"
                width="32"
                height="32"
              >
                <path
                  d="M114.133333 490.666667l-14.656 22.378666a21.333333 21.333333 0 0 0-3.477333 11.690667V725.333333a21.333333 21.333333 0 0 0 21.333333 21.333334h42.794667v42.666666H117.333333a64 64 0 0 1-64-64v-200.597333a64 64 0 0 1 10.453334-35.072l134.101333-204.736A64 64 0 0 1 251.434667 256h144.746666A149.376 149.376 0 0 1 544 128h277.333333a149.333333 149.333333 0 0 1 149.333334 149.333333v362.666667a149.333333 149.333333 0 0 1-149.333334 149.333333v-42.666666a106.666667 106.666667 0 0 0 106.666667-106.666667V277.333333a106.666667 106.666667 0 0 0-106.666667-106.666666h-277.333333a106.666667 106.666667 0 0 0-106.666667 106.666666v469.333334h231.36v42.666666h-338.773333v-42.666666H394.666667V298.666667h-64v170.666666a64 64 0 0 1-64 64h-170.666667v-42.666666h18.133333z m0 0h152.533334a21.333333 21.333333 0 0 0 21.333333-21.333334v-170.666666h-36.565333a21.333333 21.333333 0 0 0-17.856 9.642666L114.133333 490.666667z"
                  p-id="8882"
                  fill="#ffbc25"
                ></path>
                <path
                  d="M245.333333 896a106.666667 106.666667 0 1 1 0-213.333333 106.666667 106.666667 0 0 1 0 213.333333z m0-42.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128zM757.333333 896a106.666667 106.666667 0 1 1 0-213.333333 106.666667 106.666667 0 0 1 0 213.333333z m0-42.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128z"
                  p-id="8883"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>待收货</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667213765331"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9989"
                width="32"
                height="32"
              >
                <path
                  d="M512.544 957.263c-242.074 0-438.304-196.904-438.304-439.804S270.469 77.66 512.544 77.66c242.064 0 438.304 196.9 438.304 439.799S754.608 957.263 512.544 957.263zM510.174 146.07c-204.309 0-369.909 166.177-369.909 371.179 0 204.995 165.6 371.179 369.909 371.179 204.275 0 369.899-166.185 369.899-371.179C880.073 312.247 714.448 146.07 510.174 146.07zM713.148 453.904 504.529 663.763l0-0.02c-6.31 6.345-14.987 10.245-24.625 10.245-9.6 0-18.315-3.94-24.605-10.245l-138.605-139.59c-6.287-6.3-10.167-15.005-10.167-24.62 0-19.3 15.592-34.915 34.77-34.915 9.622 0 18.32 3.92 24.627 10.25l113.98 114.815 184.02-185.092c6.295-6.325 15.025-10.222 24.62-10.222 19.185 0 34.755 15.615 34.755 34.87C723.298 438.876 719.418 447.594 713.148 453.904z"
                  p-id="9990"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>已完成</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="dizhi">
      <div>
        <div class="top">常用工具</div>
        <div class="bottom">
          <dl @click="shouhuodizhi">
            <dt>
              <svg
                t="1667214397886"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1225"
                width="32"
                height="32"
              >
                <path
                  d="M512 0C306.567529 0 138.812235 161.370353 128.512 364.242824 116.254118 610.514824 340.359529 879.013647 512 1024c171.640471-144.986353 395.745882-413.485176 383.488-659.757176C885.187765 161.370353 717.432471 0 512 0z m0 543.984941a159.984941 159.984941 0 0 1-159.984941-160.015059 159.984941 159.984941 0 1 1 319.969882 0A159.984941 159.984941 0 0 1 512 543.984941z m0-319.969882z"
                  fill="#ffbc25"
                  p-id="1226"
                ></path>
              </svg>
            </dt>
            <dd>收货地址</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667214436577"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2299"
                width="32"
                height="32"
              >
                <path
                  d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                  p-id="2300"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>我的收藏</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667214457959"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3380"
                width="32"
                height="32"
              >
                <path
                  d="M829.318042 395.60506l0-34.388205c0-163.820066-133.287679-297.107745-297.107745-297.107745l-41.373293 0c-163.820066 0-297.107745 133.287679-297.107745 297.107745l0 34.388205c-63.956637 13.401218-112.1298 70.216201-112.1298 138.097218l0 37.586037c0 77.80811 63.284325 141.113925 141.093459 141.113925l61.903885 0c17.746176 0 32.145118-14.397918 32.145118-32.145118L316.741921 424.732447c0-17.746176-14.397918-32.145118-32.145118-32.145118l-26.578332 0 0-31.370475c0-128.369669 104.448864-232.818533 232.818533-232.818533l41.373293 0c128.369669 0 232.818533 104.448864 232.818533 232.818533l0 31.370475-26.578332 0c-17.746176 0-32.145118 14.397918-32.145118 32.145118l0 255.524674c0 17.746176 14.397918 32.145118 32.145118 32.145118l34.545794 0c-11.70867 67.673286-60.616566 122.56343-126.917598 141.840472-6.966669-32.302707-35.688827-56.602136-70.047356-56.602136L500.400824 797.640576c-39.552831 0-71.718415 32.165584-71.718415 71.718415l0 17.349133c0 39.532365 32.165584 71.697949 71.718415 71.697949l75.631538 0c35.518958 0 64.86431-26.00528 70.52524-59.924811 90.709955-21.234627 157.466358-95.560426 169.781848-187.05014 70.298066-7.974625 125.107369-67.74594 125.107369-140.142807l0-37.586037C941.447842 465.820238 893.272633 409.006278 829.318042 395.60506zM252.451686 648.112004l-29.758768 0c-42.357713 0-76.804247-34.468023-76.804247-76.824713l0-37.586037c0-42.357713 34.446533-76.824713 76.804247-76.824713l29.758768 0L252.451686 648.112004zM604.891643 886.707101c0 15.905248-12.954033 28.837792-28.859281 28.837792L500.400824 915.544893c-15.905248 0-28.859281-12.933567-28.859281-28.837792l0-17.349133c0-15.905248 12.954033-28.859281 28.859281-28.859281l75.631538 0c15.905248 0 28.859281 12.954033 28.859281 28.859281L604.891643 886.707101zM877.15863 571.287291c0 42.357713-34.446533 76.824713-76.804247 76.824713l-29.758768 0 0-191.235462 29.758768 0c42.357713 0 76.804247 34.468023 76.804247 76.824713L877.15863 571.287291z"
                  p-id="3381"
                  fill="#ffbc25"
                ></path>
              </svg>
            </dt>
            <dd>在线客服</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667214483388"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4502"
                width="32"
                height="32"
              >
                <path
                  d="M148.992 344.107l54.87 466.56h616.277l54.869-466.56-171.093 114.048L512 189.483 320.085 458.155 148.992 344.107z m-29.483-122.24l179.158 119.466L477.269 91.307a42.667 42.667 0 0 1 69.462 0l178.602 250.026 179.2-119.466A42.667 42.667 0 0 1 970.54 262.4l-70.102 595.925A42.667 42.667 0 0 1 858.07 896H165.931a42.667 42.667 0 0 1-42.368-37.675L53.46 262.357a42.667 42.667 0 0 1 66.006-40.49zM512 640a85.333 85.333 0 1 1 0-170.667A85.333 85.333 0 0 1 512 640z"
                  fill="#ffbc25"
                  p-id="4503"
                ></path>
              </svg>
            </dt>
            <dd>VIP专属客服</dd>
          </dl>
          <dl>
            <dt>
              <svg
                t="1667214499581"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5592"
                width="32"
                height="32"
              >
                <path
                  d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448S64 759.424 64 512 264.576 64 512 64z m0 85.333333C311.701333 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333z m21.333333 277.333334a21.333333 21.333333 0 0 1 21.333334 21.333333v298.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V448a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666z m0-170.666667a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666z"
                  fill="#ffbc25"
                  p-id="5593"
                ></path>
              </svg>
            </dt>
            <dd>关于</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  mounted() {
    this.name = sessionStorage.getItem("userid");
    this.$emit("fanhui", 3);
  },
  methods: {
    out() {
      sessionStorage.clear();
      this.$router.go(0);
    },
    //收货地址
    shouhuodizhi() {
      this.$router.push({ name: "shouhuodizhi" });
    },
    //全部订单
    quanbudingdan() {
      this.$router.push({ name: "dingdan" });
    },
  },
};
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 2rem;
  background: #fe7723;
  padding: 0.1rem;
  position: relative;
  box-sizing: border-box;
  > .xinxi {
    width: 97%;
    height: 1.6rem;
    background: white;
    border-radius: 0.15rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    > .yonghuming {
      width: 100%;
      height: 0.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      > p {
        max-width: 1.5rem;
        height: 0.2rem;
        overflow: hidden;
      }
      > span {
        background: rgb(255, 111, 3);
        color: white;
        border-radius: 10px;
        padding: 3px 5px;
      }
    }
    > .hai {
      width: 100%;
      height: 0.52rem;
      display: flex;
      justify-content: center;
      align-items: center;
      > h5 {
        padding: 0.15rem 0.25rem;
      }
    }
    > .touxiang {
      width: 0.75rem;
      height: 0.75rem;
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.dingdan {
  width: 100%;
  height: 2rem;
  padding: 0.1rem;
  margin-top: 0.33rem;
  box-sizing: border-box;
  > div {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 0.15rem;
    display: flex;
    flex-direction: column;
    > .top {
      padding: 0.15rem;
      box-sizing: border-box;

      display: flex;
      > div {
        width: 50%;
        border-bottom: 1px solid #ccc;
        padding: 15px 0;
      }
      > .left {
        text-align: left;
      }
      > .right {
        text-align: right;
        color: #999999;
      }
    }
    > .bottom {
      display: flex;
      flex: 1;
      > dl {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        > dt {
          display: flex;
          justify-content: center;
          align-content: center;
        }
        > dd {
          text-align: center;
          color: #999999;
          padding: 0.1rem 0;
        }
      }
    }
  }
}
.dizhi {
  width: 100%;
  padding: 0.1rem;
  box-sizing: border-box;
  > div {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 0.15rem;
    display: flex;
    flex-direction: column;
    > .top {
      // height: 30%;
      padding: 0.15rem;
      box-sizing: border-box;
      display: flex;
    }
    .bottom {
      display: flex;
      flex-wrap: wrap;
      > dl {
        width: 25%;
        height: 100%;
        // background: red;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        > dt {
          display: flex;
          justify-content: center;
          align-content: center;
        }
        > dd {
          text-align: center;
          color: #999999;
          padding: 0.1rem 0;
        }
      }
    }
  }
}
</style>